<template>
    <div class="home">
      <div class="wrappar">
        <div class="title-img" :style="{ height: height + 'px' }">
          <img src="http://cshj180.oss-cn-shenzhen.aliyuncs.com/newweb/logo.png" class="logo"/>
          <img src="http://cshj180.oss-cn-shenzhen.aliyuncs.com/newweb/bg1.jpg" width="100%">
          <div class="btn-wrappar">
            <div class="btn animated" v-for="(item, index) in btnlist" :key="index" @click="handleClick(index)">
              <span :style="item.titleStyle">{{ item.title }}</span>
              <span :style="item.subStyle">{{ item.subtitle }}</span>
            </div>
          </div>
        </div>

        <div style="width: 100%; display: flex; justify-content: space-around;  margin-top: 40px">
          <div class="left-content" style="width: 60%;">

            <div>
              <el-card class="box-card">
                <video-player  class="video-player-box vjs-custom-skin"
                               style="width: 80%; margin: 0 auto"
                                  :class="autostart ? 'video-btn' : ''"
                                  ref="videoPlayer"
                                  :options="playerOptions"
                                  :playsinline="true"
                                  @pause="onPlayerPause($event)"></video-player>
                <div style="width: 80%; margin: 10px auto;">
                  <img :src="dh" width="100%"/>
                </div>
              </el-card>
            </div>

            <div class="content-wrappar">
              <el-card class="box-card">
                <div slot="header">
                  <img :src="gl" width="100%"/>
                </div>
                <div class="content" :style="contentStyle">
                  <span style="color: rgb(234, 158, 33)">①.&nbsp;</span>
                  <span style="color: rgb(35, 255, 6)">充值比例</span>
                  <span style="color: red">&nbsp;1：1000&nbsp;</span>
                  <span style="color: rgb(35, 255, 6)">.</span>
                  <span style="color: rgb(35, 255, 6)">早充晚充都送</span>
                  <span style="color: red">&nbsp;120%&nbsp;</span>
                  <span style="color: rgb(35, 255, 6)">.</span>
                  <span style="color: rgb(35, 255, 6)">游戏内再多领</span>
                  <span style="color: red">&nbsp;100%&nbsp;</span>
                  <span style="color: rgb(35, 255, 6)">充值返还。总之白送。</span>
                </div>
                <div class="content" v-for="(item, index) in news" :key="index" :style="contentStyle">
                  <span style="color: rgb(234, 158, 33)">{{ item.title }}&nbsp;</span>
                  <span :style="item.style">{{ item.subTitle }}</span>
                </div>
              </el-card>
            </div>

            <!--<div class="recycle-wrappar">-->
              <!--<el-card class="box-card">-->
                <!--<div slot="header">-->
                  <!--<span>充值和回收</span>-->
                <!--</div>-->
                <!--<div class="recycle">-->
                  <!--<recycle-pane></recycle-pane>-->
                <!--</div>-->
              <!--</el-card>-->
            <!--</div>-->

            <div class="item-wrappar">
              <el-card class="box-card">
                <div slot="header">
                  <span>装备展示</span>
                </div>
                <div style="display: flex; justify-content: space-around">
                  <div class="items">
                    <div v-for="(item, index) in imgs" :key="index">
                      <img :src="item" width="100%">
                    </div>
                  </div>
                  <img src="http://cshj180.oss-cn-shenzhen.aliyuncs.com/newweb/007.png" style="width: 24%; margin-bottom: 10px"/>
                </div>
              </el-card>
            </div>
          </div>
          <caricature-view style="width: 28%;"></caricature-view>
        </div>
        <div style="height: 200px; width: 100%"></div>
      </div>
      <broad-side :is-bool="isBool" @handleClose="isBool = true"></broad-side>
      <footer-logo></footer-logo>
      <footer-box></footer-box>
      <pay-dialog :dialogVisible="dialogVisible" @handleClose="dialogVisible = false"></pay-dialog>
      <embed v-if="autostart" class="embed" src="https://cshj180.oss-cn-shenzhen.aliyuncs.com/Cloud%209.mp3" width=0 height=0 controls="ControlPanel" loop="100" autostart="true"/>
    </div>
</template>

<script>
/* eslint-disable */
import FooterBox from '../components/FooterBox/index'
// import RecyclePane from '../components/Recycle/RecyclePane'
// import img1 from '../assets/001.png'
// import img2 from '../assets/002.png'
// import img3 from '../assets/003.png'
// import img4 from '../assets/004.png'
// import img5 from '../assets/005.png'
// import img6 from '../assets/006.png'
// import img7 from '../assets/007.png'
import dh from '../assets/dh.jpg'
import gl from '../assets/gl.gif'
import FooterLogo from '../components/FooterLogo/index'
import CaricatureView from './component/CaricatureView'
// import bg1 from '../assets/bg1.jpg'
import BroadSide from '../components/Broadside/index'
// import logo from '../assets/logo.png'
import PayDialog from '../components/PayDialog/PayDialog'
import { MessageBox } from 'element-ui'
export default {
  name: 'home',
  data () {
    return {
      btnlist: [
        { title: '登录器网盘下载', subtitle: 'DOWNLOAD LOGIN OF RAR', titleStyle: { color: '#fa8303' }, subStyle: { color: '#8b4a3c' } },
        { title: '登录器本地下载', subtitle: 'DOWNLOAD LOGIN OF RAR', titleStyle: { color: '#9cd8fc' }, subStyle: { color: '#2d6f81' } },
        { title: '幸运红包抽奖', subtitle: 'GOOD LUCK', titleStyle: { color: '#f2c3f9' }, subStyle: { color: '#7e749d' } },
        { title: '在线充值', subtitle: 'PAY ONLINE', titleStyle: { color: '#f6f800' }, subStyle: { color: '#94a043' } },
        { title: '纯净客户端', subtitle: 'PURE CLIENT', titleStyle: { color: '#fff' }, subStyle: { color: '#a5a9be' } }
      ],
      news: [
        { title: '②.',
          subTitle: '⒈８０＋⒈８５特色合击二合一。免费泡顶级、憋尿激情。非RMB玩家跨年首选!',
          style: { 'color': 'rgb(251, 0, 255)' } },
        { title: '③.',
          subTitle: '只卖会员30元维护游戏服务器.无坑比赞助大使。一包烟钱，一夜终极套、激情大半年。',
          style: { 'color': 'rgb(21, 159, 236)' } },
        { title: '④.',
          subTitle: '三职业通用龙神特技。倚天辟地、神龙附体、召唤巨魔。丰富PK手法，属性凶残。',
          style: { 'color': 'rgb(251, 0, 255)' } },
        { title: '⑤.',
          subTitle: '装备免费领到手软，复古时装、护身法器。护体鲜花升级全送送送。有一样合成请你打死我!',
          style: { 'color': 'rgb(21, 159, 236)' } },
        { title: '⑥.',
          subTitle: '地图BOSS超多，打到流泪。RMB回收账号。玩腻了找GM换钱过年给小孩发压岁钱。',
          style: { 'color': 'rgb(251, 0, 255)' } },
        { title: '⑦.',
          subTitle: '不变态无秒杀。三职业真正做到平衡。兼顾180玩家喜好.道道、道战、战战一样猛。',
          style: { 'color': 'rgb(21, 159, 236)' } },
        { title: '⑧.',
          subTitle: '无测试区，版本节奏上百次调试.早进晚进都一样。就是干。开服只为玩家激情、玩家开心！',
          style: { 'color': 'rgb(251, 0, 255)' } },
        { title: '⑨.',
          subTitle: '长期百十人在线,第二天晚合区第三天拿沙.奖100万+300RMB.老区奖励50万。',
          style: { 'color': 'rgb(21, 159, 236)' } }
      ],
      imgs: [
        'http://cshj180.oss-cn-shenzhen.aliyuncs.com/newweb/001.png',
        'http://cshj180.oss-cn-shenzhen.aliyuncs.com/newweb/002.png',
        'http://cshj180.oss-cn-shenzhen.aliyuncs.com/newweb/003.png',
        'http://cshj180.oss-cn-shenzhen.aliyuncs.com/newweb/004.png',
        'http://cshj180.oss-cn-shenzhen.aliyuncs.com/newweb/005.png',
        'http://cshj180.oss-cn-shenzhen.aliyuncs.com/newweb/006.png'],
      // logo,
      height: 700,
      dialogVisible: false,
      contentStyle: {
        'font-size': '22px'
      },
      autostart: true,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: true, // 如果true,浏览器准备好时开始回放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: true, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4',
          src: 'https://cshj180.oss-cn-shenzhen.aliyuncs.com/video2.mp4' // url地址
        }],
        // width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: false // 全屏按钮
        }
      },
      gl,
      dh,
      // 显示抽奖圆盘
      isBool: true
    }
  },
  components: {
    // Pan,
    PayDialog,
    BroadSide,
    FooterLogo,
    // RecyclePane,
    FooterBox,
    CaricatureView
  },
  created () {
    this.screenWidth = document.body.clientWidth
    this.setSize()
    // 版本介绍 文字大小
    if (this.screenWidth < 1624) {
      this.contentStyle = { 'font-size': '18px' }
    } else {
      this.contentStyle = { 'font-size': '24px' }
    }

    // 提示加入QQ群
    setTimeout(() => {
      MessageBox.alert('本服为绿色版本，无任何补丁，登录游戏若出现黑屏，直接下载纯净客户端，安装后即可解决。加入创世群聊QQ群', '玩家须知', {
        confirmButtonText: '确定',
        callback: action => {
          if (action === 'confirm') {
            window.open('https://jq.qq.com/?_wv=1027&k=5EVSRhv')
          }
        }
      })
    }, 5000)
  },
  mounted () {
    // 动态加载头部视图
    const that = this
    window.addEventListener('resize', function () {
      that.screenWidth = document.body.clientWidth
      that.setSize()
    }, false)
  },
  methods: {
    setSize () {
      this.height = `${(this.screenWidth / 1920) * 900}`
    },
    handleJoinQQ (val) {
      if (val === '0') {
        window.open('http://wpa.qq.com/msgrd?v=3&uin=2384049697&site=qq&menu=yes')
      } else {
        window.open('https://jq.qq.com/?_wv=1027&k=5J0Fd5P')
      }
    },
    // 显示去支付弹窗
    handleClick (index) {
      if (index === 0) {
        _hmt.push(['_trackEvent', '登录器下载', 'click'])
        window.open('http://cshj180.oss-cn-shenzhen.aliyuncs.com/newweb/%E5%88%9B%E4%B8%96%E5%90%88%E5%87%BB%5B1%E6%9C%882%E6%97%A5%5D.rar')
      } else if (index === 1) {
        window.open('http://cshj180.oss-cn-shenzhen.aliyuncs.com/newweb/%E5%88%9B%E4%B8%96%E5%90%88%E5%87%BB%5B1%E6%9C%882%E6%97%A5%5D.rar')
      } else if (index === 2) {
        _hmt.push(['_trackEvent', '红包抽奖', 'click'])
        this.isBool = false
      } else if (index === 3) {
        _hmt.push(['_trackEvent', '充值', 'click'])
        this.dialogVisible = true
      } else if (index === 4) {
        window.open('http://xz.yk007.com/%E7%83%AD%E8%A1%80%E4%BC%A0%E5%A5%8712%E5%91%A8%E5%B9%B4%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%AE%98%E6%96%B9%E4%B8%8B%E8%BD%BD%20(mir2_Setup20120509).exe')
      }
    },
    // 视频停止后，开放音频
    onPlayerPause (player) {
      this.autostart = false
      this.player.muted(false)
    },
    // 显示去支付弹窗
    handlePay () {
      this.dialogVisible = true
    },
    // 关闭去支付弹窗
    handleClosePay () {
      this.dialogVisible = false
    }
  },
  computed: {
    player () {
      return this.$refs.videoPlayer.player
    }
  }
}
</script>

<style lang="scss">
  .video-js .vjs-big-play-button {
    top: 250px !important;
  }
  .video-btn {
    .video-js .vjs-mute-control {
      display: none !important;
    }
  }
  .left-content {
    .el-card {
      background-color: #23272b !important;
      border-color: #3f828b !important;
      color: #a9f0f6 !important;
    }
    .el-card__header {
      border-color: #3f828b !important;
    }
  }
</style>

<style lang="scss">
    .el-carousel__arrow--left {
      background: $font-color !important;
      font-size: 30px !important;
    }
</style>

<style lang="scss" scoped>
  .content-header {
    font-size: 24px;
    color: #b55525;
    display: flex;
    flex-direction: column;
    margin: 20px 0;
  }
.home {
  display: flex;
  justify-content: center;
  position: relative;
  background-color: #2A2623;
  width: 100%;
  .wrappar {
    /*position: relative;*/
    .title-img {
      width: 100%;
      overflow: hidden;
      position: relative;
      .header-img {
        height: 50%;
        width: 100%;
      }
      .logo {
        position: absolute;
        top: 0;
        left: 60px;
        width: 290px;
        height: 200px;
      }
      /* 按钮菜单 */
      .btn-wrappar {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 80px;
        background-color:rgba(0,0,0,0.7);
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 0 30px;
        .btn {
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          :first-child {
            margin-bottom: 4px;
            font-size: 20px;
          }
          &:hover {
            animation-name:pulse;
          }
        }
      }
    }

    /* 版本介绍菜单 */
    .content-wrappar {
      .content {
        display: flex;
        margin-left: 20px;
        margin-top: 6px;
        font-size: 22px;
        margin-bottom: 16px;
        div {
          min-width: 60px;
          margin-bottom: 4px;
        }
      }
    }

    /* 回收菜单 */
    .recycle-wrappar {
      .recycle {
        margin-left: 20px;
        width: 600px;
      }
    }

    // 装备展示
    .item-wrappar {
      position: relative;
      .items {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        width: 74%;
        div {
          width: 32%;
          margin-bottom: 10px;
        }
      }
    }
    .swiper {
      background-color: $bg-color;
      color: #fff;
      width: 745px;
      .img-shot {
        padding: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  .box-card {
    margin-bottom: 10px;
  }
}
</style>
